import { defineComponent, reactive, ref } from "vue";
import styles from "./Detail.module.less";
import insuranceUnderstand from "./insuranceUnderstand";
import exclusion from "./exclusion";
import attrDTOList from "./attrDTOList";
import remind from "./remind";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    // 标题
    const SchemeTitle = (props: any) => (
      <div class={styles['scheme-title']}>
        <span>{props.title}</span>
      </div>
    )

    // 保障内容
    const EnsureContent = () => (
      <div class={styles['ensure-content']}>
        <div class={styles['ensure-content-header']}>
          <div class={styles['header-col']}>
            <span>保障内容</span>
          </div>
          <div class={styles['header-col']}>
            <span>保险责任描述</span>
          </div>
          <div class={styles['header-col']}>
            <span>保险金额</span>
          </div>
        </div>
        <div class={styles['ensure-content-row']}>
          <div class={styles['content-row-col']}><span>意外伤害身故、伤残（含高风险运动）</span></div>
          <div class={styles['content-row-col']}><span>意外伤害身故、伤残（含高风险运动）</span></div>
          <div class={styles['content-row-col']}><span>20万</span></div>
        </div>
        <div class={styles['ensure-content-row']}>
          <div class={styles['content-row-col']}><span>意外伤害医疗（含高风险运动）</span></div>
          <div class={styles['content-row-col']}><span>意外伤害医疗（含高风险运动）</span></div>
          <div class={styles['content-row-col']}><span>2万</span></div>
        </div>
        <div class={styles['ensure-content-row']}>
          <div class={styles['content-row-col']}><span>急性病身故（含猝死）或全残</span></div>
          <div class={styles['content-row-col']}><span>急性病身故（含猝死）或全残</span></div>
          <div class={styles['content-row-col']}><span>10万</span></div>
        </div>
        <div class={styles['ensure-content-row']}>
          <div class={styles['content-row-col']}><span>急性病医疗</span></div>
          <div class={styles['content-row-col']}><span>急性病医疗</span></div>
          <div class={styles['content-row-col']}><span>2万</span></div>
        </div>
        <div class={styles['ensure-content-row']}>
          <div class={styles['content-row-col']}><span>意外伤害及急性病住院津贴</span></div>
          <div class={styles['content-row-col']}><span>意外伤害及急性病住院津贴</span></div>
          <div class={styles['content-row-col']}><span>50/天</span></div>
        </div>
      </div>
    )

    // 客户告知书
    const Notice = () => (
      <div class={styles.notice}>
        <div style={{ width:"1000px" ,height:"400px"}}></div>
      </div>
    )

    // 保险方案
    const Plan = () => (
      <div class={styles.plan}>
        <SchemeTitle title="保险责任(详见条款)" />
        <EnsureContent />
        <SchemeTitle title="保险期间及费率" />
        <div class={styles.during}>
          <div class={styles['during-header']}>每天</div>
          <div class={styles['during-content']}>4.0元</div>
        </div>
      </div>
    )

    const termsState = ref([
      {
        label: '1、平安产险旅行意外伤害保险（互联网版）条款 C00001732312021121623133.doc',
        url: '',
        download_url: '',
      },
      {
        label: '2、平安产险附加高风险运动意外伤害保险（互联网版）条款 C00001732322021120306513.doc',
        url: '',
        download_url: '',
      },
      {
        label: '3、平安产险附加旅行急性病身故或全残保险（互联网版）条款 C00001731922022011979393.doc',
        url: '',
        download_url: '',
      },
      {
        label: '4、平安产险附加旅行急性病医疗费用补偿保险（互联网版）条款 C00001732522022011476373.doc',
        url: '',
        download_url: '',
      },
      {
        label: '5、平安产险附加旅行住院津贴保险（互联网版）条款 C00001732522022011201301.doc',
        url: '',
        download_url: '',
      },
      {
        label: '6、平安产险附加救护车费用补偿保险（互联网版）条款 C00001731922022011979323.doc',
        url: '',
        download_url: '',
      },
    ])

    // 保险条款
    const Terms = () => (
      <div class={styles.terms}>
        <SchemeTitle title="保险条款" />
        <div class={styles['terms-title']}>
          景区意外险（互联网专属）方案一
        </div>
        <div class={styles['terms-table-header']}>
          <div class={styles['header-col']}>
            <span>保险条款</span>
          </div>
          <div class={styles['header-operate']}>
            <span>操作</span>
          </div>
        </div>
        <div class={styles['terms-table-rows']}>
          {
            termsState.value.map((item: any) => (
              <div class={styles['terms-table-row']}>
                <div class={styles['row-col']}>
                  <span>{item.label}</span>
                </div>
                <div class={styles['row-operate']}>
                  <div class={styles.btns}>
                    <span onClick={() => { window.open(item.url) }}>查看</span>
                    <span onClick={() => { window.location.href = item.download_url }}>下载</span>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    )

    const InsuranceUnderstand = () => (
      <div class={styles['insuranceUnderstand-box']}>
        <SchemeTitle title="景区意外险投保须知" />
        <div class={styles.insuranceUnderstand} v-html={insuranceUnderstand}></div>
      </div>
    )

    const Exclusion = () => (
      <div class={styles['exclusion-box']}>
        <SchemeTitle title="景区意外险责任免除" />
        <div class={styles['exclusion']} v-html={exclusion}></div>
      </div>
    )

    const CommonProblem = () => (
      <div class={styles['common-problem-box']}>
        <SchemeTitle title="常见问题" />
        <div class={styles['common-problem']}>
          {
            attrDTOList.map((item: any) => (
              <div class={styles['common-problem-item']}>
                <div class={styles['item-question']}>
                  <div class={styles['img-box']}>
                    <img src={imgPath("/Question.png")} />
                  </div>
                  <span>{item.valueMark}</span>
                </div>
                <div class={styles['item-answer']}>
                  <div class={styles['img-box']}>
                    <img src={imgPath("/Answer.png")} />
                  </div>
                  <div class={styles.answer} v-html={item.value}></div>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    )

    const Remind = () => (
      <div class={styles['remind-box']}>
        <SchemeTitle title="重要提醒" />
        <div class={styles['remind']} v-html={remind}></div>
      </div>
    )

    const navs = reactive({
      list: [
        {
          label: '客户告知书',
          el: () => <Notice />,
        },
        {
          label: '保险方案',
          el: () => <Plan />,
        },
        {
          label: '保险条款',
          el: () => <Terms />,
        },
        {
          label: '投保须知',
          el: () => <InsuranceUnderstand />,
        },
        {
          label: '责任免除',
          el: () => <Exclusion />,
        },
        {
          label: '常见问题',
          el: () => <CommonProblem />,
        },
        {
          label: '重要提醒',
          el: () => <Remind />,
        },
      ],
      checked: 0
    })
    return () => (
      <div class={styles.insure_content}>
        <div class={styles['tab-containter']}>
          {
            navs.list.map((item: any, index: number) => (
              <div class={[styles['tab-item'], navs.checked === index && styles.checked]} onClick={() => { navs.checked = index }}>{item.label}</div>
            ))
          }
        </div>
        <div class={styles.content}>
          {navs.list[navs.checked]?.el?.()}
        </div>
      </div>
    )
  }
})